import React, { Component } from 'react'
import { connect } from "react-redux";
import { ScrollView, View, Text, Image } from '@tarojs/components'
import NoticeItem from '@components/Notice/index'
import { clearNotice } from '@redux/actions'
import imgList from '@components/imgList'
import './index.scss'

class Notice extends Component {
  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  handleClearClick = () => {
    this.props.clearNotice && this.props.clearNotice()
  }

  render () {
    return (
      <ScrollView className='pageContent'
        enableFlex
        scrollY>
          <View className="clearBtn"
            onClick={this.handleClearClick} >
            <Image className="icon" src={imgList.delIcon} mode='aspectFit'></Image>
            <Text>清空全部消息</Text>
          </View>
          <View class="newContainer">
            {
              this.props.notice.map((item,index) => <NoticeItem key={index} value={item}/>)
            }
          </View>
          
      </ScrollView>
    )
  }
}

export default connect(({notice}) => ({notice}),{clearNotice})(Notice)

